/**
 * SPDX-FileCopyrightText: 2023-2025 Sangfor Technologies Inc.
 * SPDX-License-Identifier: Mulan PSL v2
 */
<!--
 * @Author: zhb
 * @Date: 2020-08-28
 * @Description: 时间戳算子表单配置
 -->
<template>
    <div class="operate_form">
        <sf-form ref="timeStampForm"
                 class="drawer-form__container"
                 :label-width="80">
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>选择字段</lang>
                </sf-fieldlabel>
                <sf-select v-model="formData.timeProperty"
                           :default-width="fieldWidth"
                           :allow-search="true"
                           :allow-blank="false"
                           :default-disabled="disabledStatus"
                           :options="timeFieldList" />
            </sf-form-item>
            <sf-form-item class="form-item--first">   
                <sf-fieldlabel>
                    <lang>转换方式</lang>
                </sf-fieldlabel>
                <sf-radio-group v-model="formData.dateFormat"
                                class="dstFormat-group">
                    <sf-radio name="dateFormat"
                              :default-disabled="disabledStatus"
                              check-value="fromTimeStamp">
                        unix时间戳to本地时间
                    </sf-radio>
                    <sf-radio name="dateFormat"
                              :default-disabled="disabledStatus"
                              check-value="unixTimeStamp">
                        本地时间to unix时间戳
                    </sf-radio>
                </sf-radio-group>
            </sf-form-item>
            <sf-form-item class="form-item--first">
                <sf-fieldlabel>
                    <lang>输出列</lang>
                </sf-fieldlabel>
                <sf-radio-group v-model="formData.isNewColumnNeeded"
                                class="dstFormat-group">
                    <sf-radio name="isNewColumnNeeded"
                              :default-disabled="disabledStatus"
                              :check-value="true">
                        新增列
                    </sf-radio>
                    <sf-radio name="isNewColumnNeeded"
                              :default-disabled="disabledStatus"
                              :check-value="false">
                        覆盖原有列
                    </sf-radio>
                </sf-radio-group>
            </sf-form-item>
            <sf-form-item v-if="formData.dateFormat === 'fromTimeStamp'"
                          class="form-item--first">
                <sf-fieldlabel>
                    <lang>转换精度</lang>
                </sf-fieldlabel>
                <sf-radio-group v-model="formData.dstFormat"
                                class="dstFormat-group">
                    <sf-radio 
                        name="dstFormat"  
                        :default-disabled="disabledStatus"
                        check-value="yyyy-MM-dd HH:mm:ss">
                        <lang>秒：yyyy-MM-dd HH:mm:ss</lang>
                    </sf-radio>
                    <sf-radio 
                        name="dstFormat"  
                        :default-disabled="disabledStatus"
                        check-value="yyyy-MM-dd HH:mm:ss:SSS">
                        <lang>毫秒：yyyy-MM-dd HH:mm:ss:SSS</lang>
                    </sf-radio>
                </sf-radio-group>
            </sf-form-item>
            <sf-form-item v-if="formData.isNewColumnNeeded"
                          class="form-item--first">
                <sf-fieldlabel>
                    <lang>输出字段</lang>
                </sf-fieldlabel>
                <sf-textfield
                    v-model="formData.columnName"
                    :default-width="fieldWidth"
                    :max-length="30"
                    :allow-blank="false"
                    :utf8-length="false"
                    vtype="column_name"
                    :default-disabled="disabledStatus"
                    :blur-trim="true" />
            </sf-form-item>
        </sf-form>
        <div v-if="!disabledStatus && showOperateBtn"
             class="add-operate__btn">
            <sf-button-primary 
                class="btn-primary m-r10"
                @click.native="_submit">
                <lang>确定</lang>
            </sf-button-primary>
            <sf-button @click.native="_cancel">
                <lang>取消</lang>
            </sf-button>
        </div>
    </div>
</template>

<script lang=ts>
import { Vue, Component, Ref } from 'vue-property-decorator';
import { deepClone } from 'src/util/deep_clone';
import {
    TIME_STAMP_DEFAULT_DATA,
    ADD_DEFAULT_WIDTH,
    DEFAULT_WIDTH
} from 'src/home/mod_cluster/project_manager/feature_manager/const_data';
import { SfForm } from '@sxf/sf-vue-component';

@Component({
    name: 'TimeStampForm'
})
export default class TimeStampForm extends Vue {
    @Ref() timeStampForm!: SfForm

    // TODO: REMOVE ANY
    formData = { ...TIME_STAMP_DEFAULT_DATA }
    dstFormat = 'yyyy-MM-dd HH:mm:ss'
    disabledStatus = false
    showOperateBtn = false
    fieldList = []
    timeFieldList = []
    get fieldWidth () {
        return this.showOperateBtn ? DEFAULT_WIDTH : ADD_DEFAULT_WIDTH;
    }

    reset () {
        this.formData = deepClone(TIME_STAMP_DEFAULT_DATA);
        this.clearInvalidMsg();
    }
    clearInvalidMsg () {
        this.$nextTick(() => {
            this.timeStampForm.clearInvalid();
        });
    }
    getJsonValue () {
        return this.formData;
    }
    _submit () {
        this.$emit('operate-submit', this.formData);
    }
    _cancel () {
        this.$emit('operate-cancel');
    }
    setFieldList (data) {
        this.fieldList = data;
        this.timeFieldList = data;
    }

   

    isValid () {
        return this.timeStampForm.isValid();
    }
};
</script>

<style lang="less">
.operate_form{
    .dstFormat-group{
        margin-top: -23px;
        .sfv-radio{
            margin-left: 80px;
            margin-bottom: 15px;
            display: block;
        }
    }
}
</style>

